<template>
  <div class="hd video">
    <!-- <div class="hd mt10">
      <img src="../../assets/mall_banner.jpg" alt="">
    </div> -->
    <position>
      <router-link to="/classroom">国医讲堂</router-link>
      &gt;
      <router-link to="/classroom">视频列表</router-link>
      &gt;
      <span class="last">{{news.title}}</span>
    </position>
    <div class="yybox four-cornor-wrapper" style="background:#fff;">
      <i class="l"></i>
      <i class="r"></i>
      <i class="t"></i>
      <i class="b"></i>
      <!-- product-list -->
      <h1>{{news.title}}</h1>
      <h4 class="t3 f12">{{news.source}}
        <span class="fr">
        {{formatDate(new Date(news.modified), 'yyyy-MM-dd')}}
        </span>
        </h4>
      <!-- end product list -->
      <section ref="videoWrapper" class="video-wrapper">
      <video
      id="myPlayer"
      class="video-js vjs-big-play-centered"
      width="100%"
      controls
      preload="none"
      poster="../../assets/login_logo.png"
      data-setup='{}'
    >
        您的浏览器暂不支持H5 VIDEO
      </video>
    </section>
    <section v-html="news.newsdesc">
    </section>
    </div>
  </div>
</template>

<script>
import Position from '../../components/Position'
import {commonAjax, PLATFORM_PREFIX, DOCTOR_AVATAR} from '../../api/api'
import {formatDate} from '../../common/js/util'
import 'video.js/dist/video-js.min.css'
import videojs from 'video.js'
export default {
  components: {Position},
  data () {
    return {
      DOCTOR_AVATAR: DOCTOR_AVATAR,
      news: {modified: ''},
      myplayer: null
    }
  },
  mounted () {
    if (!this.$route.params.id) {
      alert('缺少参数')
      return
    }
    this.myplayer = videojs('myPlayer', {fluid: true}, function onPlayerReady () {
      videojs.log('Player is ready!')
      this.on('ended', function () {
        videojs.log('finished playing!')
      })
    })
    this.viewHealthNews(this.$route.params.id)
  },
  methods: {
    viewHealthNews (id) {
      this.$store.commit('UPDATE_LOADING')
      commonAjax([id], `${PLATFORM_PREFIX}.healthNewService`, 'viewHealthNews').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200 && res.data.body) {
          this.news = res.data.body
          this.myplayer.src(res.data.body.fileUrl)
          this.myplayer.play()
        }
      }).catch(err => {
        this.$store.commit('UPDATE_LOADING')
        console.warn(err)
      })
    },
    formatDate (val, fmt) {
      return formatDate(val, fmt)
    }
  },
  beforeDestroy () {
    // dispose current video instance
    this.myplayer.dispose()
  }
}
</script>

<style lang="less" >
@import '../../common/css/vars.less';
.video {
  .yybox {
    padding: 30px;
  }
  h1 {
    color: @color-primary;
    font-size: 1.5em;
    text-align: center;
    padding:0 0 20px;
    
  }
  h4 {
    border-bottom: 1px solid @color-border;
    padding-bottom: 10px;
  }
  .video-wrapper {
    width: 800px;
    margin: 20px auto;
  }
  
}

</style>
